<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head></head>
<body>
  <div th:fragment="content">
    <div class="row">
      <div class="col-md-3">
        <!-- Profile Image -->
        <div class="box box-primary">
          <div class="box-body box-profile">
            <img class="profile-user-img img-responsive img-circle" th:src="${loginUser.logo != null && !loginUser.logo.isEmpty() ? loginUser.logo : 'imgs/user2-160x160.jpg'}" alt="User profile picture">
            <h3 class="profile-username text-center" th:text="${loginUser.alias}">用户昵称</h3>
            <p class="text-muted text-center" th:text="${loginUser.uname}">用户名</p>
            <ul class="list-group list-group-unbordered">
              <li class="list-group-item">
                <b>用户ID</b> <a class="pull-right" th:text="${loginUser.uid}">1</a>
              </li>
              <li class="list-group-item">
                <b>角色</b> <a class="pull-right" th:text="${loginUser.role != null ? loginUser.role.rname : '未知'}">管理员</a>
              </li>
              <li class="list-group-item">
                <b>状态</b> <a class="pull-right" th:text="${loginUser.status == 1 ? '正常' : '禁用'}">正常</a>
              </li>
              <li class="list-group-item">
                <b>最后登录</b> <a class="pull-right" th:text="${loginUser.last_login_time != null ? loginUser.last_login_time : '无记录'}">2023-05-10</a>
              </li>
            </ul>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
      <div class="col-md-9">
        <div class="nav-tabs-custom">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#settings" data-toggle="tab">个人信息设置</a></li>
          </ul>
          <div class="tab-content">
            <div class="active tab-pane" id="settings">
              <form class="form-horizontal" id="profileForm">
                <input type="hidden" name="uid" th:value="${loginUser.uid}">
                <input type="hidden" name="role.rid" th:value="${loginUser.role != null ? loginUser.role.rid : ''}">
                <input type="hidden" name="status" th:value="${loginUser.status}">
                <input type="hidden" name="last_login_time" th:value="${loginUser.last_login_time}">
                
                <div class="form-group">
                  <label for="uname" class="col-sm-2 control-label">用户名</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="uname" name="uname" th:value="${loginUser.uname}" readonly>
                  </div>
                </div>
                <div class="form-group">
                  <label for="alias" class="col-sm-2 control-label">昵称</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="alias" name="alias" th:value="${loginUser.alias}" placeholder="昵称">
                  </div>
                </div>
                <div class="form-group">
                  <label for="passwd" class="col-sm-2 control-label">密码</label>
                  <div class="col-sm-10">
                    <input type="password" class="form-control" id="passwd" name="passwd" th:value="${loginUser.passwd}" placeholder="密码">
                  </div>
                </div>
                <div class="form-group">
                  <label for="logo" class="col-sm-2 control-label">头像URL</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="logo" name="logo" th:value="${loginUser.logo}" placeholder="头像URL">
                    <p class="help-block">输入图片URL地址，例如：https://example.com/avatar.jpg</p>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="btnUpdateProfile" class="btn btn-primary">保存</button>
                    <div id="updateMessage" class="text-success" style="margin-top: 10px;"></div>
                  </div>
                </div>
              </form>
            </div>
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div>
        <!-- /.nav-tabs-custom -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    
    <script th:inline="none">
      $(function() {
        // 更新个人信息
        $('#btnUpdateProfile').click(function() {
          var formData = $('#profileForm').serialize();
          
          $.ajax({
            url: '/user/updateProfile',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
              if (response.Status === 'ok') {
                $('#updateMessage').html('个人信息更新成功').show();
                // 延迟刷新页面
                setTimeout(function() {
                  loadProfile(); // 重新加载个人中心页面
                }, 1500);
              } else {
                $('#updateMessage').html(response.msg || '更新失败，请稍后再试').removeClass('text-success').addClass('text-danger').show();
              }
            },
            error: function() {
              $('#updateMessage').html('服务器错误，请稍后再试').removeClass('text-success').addClass('text-danger').show();
            }
          });
        });
      });
    </script>
  </div>
</body>
</html> 